<template>
	<view>
		<view class="coupon-mine-header-h">
			<view class="coupon-mine-main coupon-mine-header-h">
				<sub-tab :tabs="tabs" :selectIndex="selectIndex" @change="changeIndex"></sub-tab>
			</view>
		</view>
		<view class="mt15" v-for="(item,index) in addrs" :key="index">
			<view class="coupon-box" :class="selectIndex > 0?'over':''">
				<view class="pd16_15 bg-w flex alcenter space" style="border-bottom: 2rpx dashed   #E4E6ED;">
					<view class="flex alcenter" style="width: 100%;">
						<view class="cl-orange" style="width: 96rpx;">
							<text class="ft12">¥</text>
							<text class="ft16 ftw600 ml4">{{item.price*1}}</text>
						</view>
						<view class="ml15">
							<view class="ft14 ftw600 cl-main">{{item.name}}</view>
							<view class="mt12 ft12 cl-info2">有效期:{{item.stime}}到{{item.gtime}}</view>
						</view>
					</view>
					<view v-if="selectIndex ==0" class="btn-mini" @click="oplk" :style="getBtnStyle">使用</view>
				</view>
				<view v-if="item.ishd==1" class="pd10_15 ft12 cl-notice" style="background: #ffffff; border-radius: 16upx;">
					满{{item.mprice*1}}元可用，不可与其他优惠活动同时使用
				</view>
				<view v-if="item.ishd==2" class="pd10_15 ft12 cl-notice" style="background: #ffffff; border-radius: 16upx;">
					满{{item.mprice*1}}元可用，可以与其他优惠活动同时使用
				</view>
				<view class="coupon-yl"></view>
				<view class="coupon-yr"></view>
				<!-- <view class="coupon-vip-tag">会员专享</view> -->
				<view class="over-used" v-if="selectIndex ==2">
					<image :src="statics.statusImg[0]"></image>
					<!-- <image :src="statics.statusImg[1]"></image> -->
				</view>
				<view class="over-used" v-if="selectIndex ==1">
					<image :src="statics.statusImg[1]"></image>
					<!-- <image :src="statics.statusImg[1]"></image> -->
				</view>
			</view>
			
		</view>
		<view class="pd16_15" v-if="selectIndex == 5">
			<view class="coupon-box over">
				<view class="pd16_15 bg-w flex alcenter space" style="border-bottom: 2rpx dashed   #E4E6ED;">
					<view class="flex alcenter">
						<view class="cl-orange" style="width: 96rpx;">
							<text class="ft12">¥</text>
							<text class="ft24 ftw600 ml4">200</text>
						</view>
						<view class="ml15">
							<view class="ft14 ftw600 cl-main">普通洗剪吹优惠券</view>
							<view class="mt12 ft12 cl-info2">有效期：2019.11.16-2020.11.16</view>
						</view>
					</view>
				</view>
				<view class="pd16_15 ft12 cl-notice">满50元可用，不可与其他优惠活动同时使用</view>
				<view class="coupon-yl"></view>
				<view class="coupon-yr"></view>
				<view class="coupon-vip-tag">会员专享</view>
				<view class="over-used">
					<image :src="statics.statusImg[0]"></image>
					<!-- <image :src="statics.statusImg[1]"></image> -->
				</view>
			</view>
			
		</view>
		<view class="pd16_15" v-if="selectIndex == 5">
			<view class="coupon-box over">
				<view class="pd16_15 bg-w flex alcenter space" style="border-bottom: 2rpx dashed   #E4E6ED;">
					<view class="flex alcenter">
						<view class="cl-orange" style="width: 96rpx;">
							<text class="ft12">¥</text>
							<text class="ft24 ftw600 ml4">201</text>
						</view>
						<view class="ml15">
							<view class="ft14 ftw600 cl-main">普通洗剪吹优惠券</view>
							<view class="mt12 ft12 cl-info2">有效期：2019.11.16-2020.11.16</view>
						</view>
					</view>
				</view>
				<view class="pd16_15 ft12 cl-notice">满50元可用，不可与其他优惠活动同时使用</view>
				<view class="coupon-yl"></view>
				<view class="coupon-yr"></view>
				<view class="coupon-vip-tag">会员专享</view>
				<view class="over-used">
					<image :src="statics.statusImg[0]"></image>
					<!-- <image :src="statics.statusImg[1]"></image> -->
				</view>
			</view>
			
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	  export default {
		  components: {
		  	uniLoadMore
		  },
		data(){
			return {
				addrs:[],
				listData: [],
				last_id: 0,
				reload: true,
				status: 'more',
				statusa: false,
				text:'',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有数据了'
				},
				selectIndex:0,
				tabs:['待使用','已使用','已过期'],
			}
		},
		onLoad() {
			this.last_id=0
			this.reload=true
			this.getList();
		},
		onShow() {
			
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		onPullDownRefresh(){
			this.addrs=[];
			this.last_id=0
			this.reload=true
			this.getList();
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:'/pages/client/coupon/index'
			})
		},
		methods:{
			
			getList() {
				let data = {};
				var limit=10;
				if (this.last_id>0) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
					data.offset = this.last_id*limit;
					data._ = new Date().getTime() + '';
				}
				data.type=this.selectIndex
				data.limit=limit		
				data.token = uni.getStorageSync("userinfo").token;
				uni.request({
					url: this.configs.webUrl+'/api/coupon/mycouponlist',
					data: data,
					success: data => {
						console.log(data.data)
						uni.stopPullDownRefresh();
						if (data.data.total>0) {
							let list = data.data.rows;
							this.addrs = this.reload ? list : this.addrs.concat(list);
							this.reload = false;
							this.last_id = this.last_id+1;
							console.log(this.addrs)
							if(data.data.total<this.last_id*limit){
								this.status = '';
							}
						}else{
							this.contentText.contentdown='没有数据'
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			oplk(){
				uni.navigateTo({
					url:'/pages/client/shop/list'
				})
			},
			changeIndex(index){
				this.selectIndex = index;
				this.addrs=[];
				this.last_id=0
				this.reload=true
				this.getList();
			}
		}
	}
</script>

<style>
	.coupon-mine-header-h{
		height: 100rpx;
	}
	.coupon-mine-main{
		position: fixed;
		width: 100%;
		background: #FFFFFF;
		z-index: 10;
		left: 0;
	}
	
	.coupon-box{
		background: #FAFAFA;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;

	}
	.coupon-box.over{
		opacity: 0.8;
		filter: grayscale(100%);
	}
	.coupon-box .coupon-yl,.coupon-box .coupon-yr{
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 148rpx;
		background: #F5F6FA; 
		z-index: 2;
	}
	.coupon-box .coupon-yl{
		left: -10rpx;
	}
	.coupon-box .coupon-yr{
		right: -10rpx;
	}
	.coupon-box .coupon-vip-tag{
		width: 120rpx;
		height: 40rpx;
		background: linear-gradient(139deg, #FFEDC6 0%, #FFD08D 100%);
		border-radius: 20rpx 0rpx 20rpx 0rpx;
		position: absolute;
		left: 0;
		top: 0;
		font-size: 24rpx;
		color:#A86B1B;
		text-align: center;
		line-height: 40rpx;
	}
	.coupon-box .over-used{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(255,255,255,.4);
		text-align: right;
	}
	.coupon-box .over-used image{
		width: 104rpx;
		height: 104rpx;
	}
</style>